<style scoped>
.article >>> .el-select {
  width: 100%;
}
.article .box{
  display: grid;
  grid-template-columns: 300px auto;
}
</style>
<template>
  <div class="article">
    <ywg-title></ywg-title>
    <el-button type="text" @click="dialogFormVisible = true"
      >添加新文章</el-button
    >
    <!-- 添加新文章 -->
    <el-dialog
      title="新增文章"
      top="24vh"
      width="500px"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form" ref="form">
        <el-form-item label="文章标题" :label-width="formLabelWidth">
          <el-input
            v-model="form.title"
            maxlength="10"
            show-word-limit
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章类型" :label-width="formLabelWidth">
          <el-select v-model="form.type" placeholder="请选择文章类型">
            <template v-for="item in $store.state.base.typeList">
              <el-option
                v-if="item.publish"
                :key="item._id"
                :label="item.name"
                :value="item._id"
              ></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="内容" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            maxlength="300"
            show-word-limit
            :autosize="{ minRows: 2, maxRows: 10 }"
            placeholder="请输入内容"
            v-model="form.content"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addContent">确 定</el-button>
      </div>
    </el-dialog>
    <div class="box">
      <div class="left">
        <equipment-search @getData="getdata"></equipment-search>
      </div>
      <div class="right">
        <!-- 这是表单 -->
        <el-table :data="tableData" style="width: 100%" v-loading="loading">
          <el-table-column align="center" prop="_id" label="文章id" width="220">
          </el-table-column>
          <el-table-column align="center" prop="title" label="标题">
            <template slot-scope="scope">
              <h1>{{ scope.row.title }}</h1>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="time" label="更新时间">
            <template slot-scope="scope">
              <time>{{
                $dayjs(scope.row.time).format("YYYY-MM-DD HH:mm:ss")
              }}</time>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="author.username" label="作者">
          </el-table-column>
          <el-table-column align="center" prop="type.name" label="类型">
          </el-table-column>
          <el-table-column align="center" prop="read" label="阅读量/评论条数">
            <template slot-scope="scope">
              <span>{{ scope.row.read }} / {{ scope.row.discuss.length }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="content" label="内容">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="lookContent(scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
          <el-table-column align="center" prop="isAdmin" label="编辑">
            <template slot-scope="scope">
              <el-button @click="bianji(scope.row)" type="text" size="small"
                >编辑</el-button
              >
              <el-button type="text" size="small" @click="deleteRow(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 这是分页器 -->
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pagesize"
            :hide-on-single-page="isOne"
            layout="total, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ywgTitle from "../admin/common/title";
import EquipmentSearch from "../admin/common/EquipmentSearch";
// console.log(dayjs(1608186572588).format('YYYY-MM-DD HH:mm:ss'));
export default {
  components: {
    ywgTitle,
    EquipmentSearch,
  },

  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      loading: false,
      form: {
        title: "",
        type: "",
        content: "",
      },
      formLabelWidth: "120px",
      tableData: [],
      total: 100,
      currentPage: 1,
      pagesize: 10,
      userid: "",
    };
  },
  computed: {
    isOne() {
      return this.total - this.pagesize >= 1 ? false : true;
    },
  },
  created() {
    this.userid = JSON.parse(this.$store.state.qiantai.token).uid;
    if (this.userid) {
      this.update();
    }
  },
  methods: {
    // 获取查询过来的信息
    getdata(obj){
      let temp = JSON.parse(JSON.stringify(obj));
      console.log(temp);
    },
    // 删除
    deleteRow(obj) {
      let replace = JSON.parse(JSON.stringify(obj));
      // console.log(replace);
      let uid = replace.author._id;
      let artid = replace._id;
      this.$confirm("此操作将删除该文章, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          this.$http.post("/article/del", { uid, artid }).then((data) => {
            if (data.data.code == 0) {
              this.$message({
                message: data.data.msg,
                type: "success",
              });
              this.update();
            } else {
              this.$message({
                message: data.data.msg,
                type: "warning",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 点击查看内容
    lookContent(obj) {
      let content = obj.content;
      this.$alert(content, obj.title, {
        confirmButtonText: "确定",
      });
    },
    // 点击编辑
    bianji(obj) {
      let cc = JSON.parse(JSON.stringify(obj));
      this.$router.push({ name: "文章编辑", params: { ...cc } });
    },
    // 分页器
    handleCurrentChange(val) {
      console.log("当前" + val + "页");
      this.currentPage = val;
      this.loading = true;
      this.update();
    },
    // 提交表单时
    addContent() {
      this.loading = true;
      let author = JSON.parse(this.$store.state.qiantai.token).uid;
      this.$http
        .post("/article/deit", { ...this.form, author })
        .then((data) => {
          console.log(data.data);
          if (data.data.code == 0) {
            this.$message({
              message: "恭喜你，添加成功",
              type: "success",
            });
            this.update();
            this.dialogFormVisible = false;
          } else {
            this.loading = false;
            this.$message({
              message: data.data.msg,
              type: "warning",
            });
          }
        });
    },
    // 更新数据
    update() {
      this.$http
        .get("/article/get", {
          params: {
            author: this.userid,
            pagesize: this.pagesize,
            skip: this.currentPage,
            time: new Date(),
          },
        })
        .then((data) => {
          if (data.data.code == 0) {
            this.tableData = data.data.list;
            this.total = data.data.count;
            this.loading = false;
          }
        });
    },
  },
  watch: {
    dialogFormVisible(val) {
      if (!val) {
        this.form = { title: "", type: "", content: "" };
      }
    },
  },
};
</script>